import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
import { List } from 'antd-mobile';
import { Link } from 'Configs';
import { Common } from 'UtilsCommon';
import Base from './base';

export default React.memo((props) => {
    const { property, view, pageId, pageAxis } = Base.getProps(props);
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);
    const [style2, setStyle2] = useState(null);
    const [, setRefreshId] = useState(null);
    const [disabled, setDisabled] = useState(property.disabled);
    const ele = useRef(null);

    const obj = useMemo(() => ({}), []);

    useEffect(() => {
        isVisible && Base.load(property, view, pageAxis);
    }, [property, view, pageAxis, isVisible]);

    const clickAction = useCallback((e) => {
        if (property.loading) return;
        Base.invokeEventAction(property, view, pageAxis, e);
    }, [property, view, pageAxis]);

    useEffect(() => {
        if (property.onLoad && ele.current && isVisible && !obj.isOnLoad) {
            property.onLoad(ele.current, property);
            obj.isOnLoad = true;
        }
    }, [ele.current, property, isVisible, obj]);

    property.setIsVisible = (v) => { property.isVisible = v; setIsVisible(v); };
    property.setStyle2 = (v) => setStyle2(v);
    property.getElement = () => ele.current;
    property.reLoad = () => Base.load(property, view, pageAxis);
    property.refresh = () => setRefreshId(Common.createGuid());
    property.setLoading = (v) => { property.loading = v; property.disabledStyle && setDisabled(v); };
    property.setDisabled = (v) => { property.loading = v; property.disabledStyle && setDisabled(v); };

    if (!isVisible || (!property.defaultValue && !property.value && property.isValueVisible)) return null;

    const classNames = Base.getClassNames(property, disabled);

    const { linkUrl, isDiv, cssAnimation, tagId, tagTitle, disabledStyle } = property;
    const style = property.style ? { ...property.style } : {};
    if (style2) {
        for (const key in style2) {
            style[key] = style2[key];
        }
    }

    if (disabled && disabledStyle) {
        for (const key in disabledStyle) {
            style[key] = disabledStyle[key];
        }
    }

    if (cssAnimation && cssAnimation.invokeContent) {
        const as = JSON.parse(cssAnimation.invokeContent);
        for (const key in as) style[key] = as[key];
    }
    if (linkUrl && isDiv) {
        if (linkUrl.toLowerCase().indexOf('http') >= 0 || linkUrl.toLowerCase().indexOf('tel:') >= 0) {
            return <a className={classNames} href={linkUrl} id={tagId} title={tagTitle} style={Base.setStyle(style)}>{Base.renderProperties(property, pageId)}</a>;
        }
        else {
            return <Link className={classNames} to={linkUrl} id={tagId} title={tagTitle} style={Base.setStyle(style)}>{Base.renderProperties(property, pageId)}</Link>;
        }
    }

    if (property.isList) {
        return (
            <List className={classNames} style={Base.setStyle(style)} id={tagId} title={tagTitle}>
                {Base.renderProperties(property, pageId)}
            </List>
        );
    }

    if (isDiv) return <div className={classNames} onClick={clickAction} id={tagId} title={tagTitle} ref={ele} style={Base.setStyle(style)}>{Base.renderProperties(property, pageId)}</div>;
    return Base.renderProperties(property, pageId);
});